<template>
  <el-card>
    <div slot="header">
      <h3>修改基本信息-表单查看页面</h3>
    </div>
    <div class="page_body">
      <!-- 表格 -->
      <el-row>
        <SkusTable
          :loading="tableInfo.loading"
          :data-source="tableInfo.list"
          :columns="tableInfo.columns"
        />
      </el-row>
      <!-- 表尾字段 -->
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { TABLE_COLUMNS } from './constants/home';
import { generateHighlightNode } from '@/utils/bizUtils'
import { getRecordInfoForViewService } from '@/api/commodity/commodityInfoEdit/basicAttrBatchEdit';

export default {
  components: {
    SkusTable,
    FooterFields
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: [
          ...TABLE_COLUMNS,
          {
            title: '属性值-现值',
            render: (h, { row }) => generateHighlightNode(h, row, 'valueName')
          }
        ],
        loading: false
      },
      footerFields: {}, // 表尾字段
      recordNo: '', // 单据号
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      const { recordNo } = this.$route.query;
      if (recordNo) {
        this.setRecordInfo(recordNo)
      }
    },
    // 设置单据信息
    async setRecordInfo (recordNo) {
      const data = { recordNo }
      const target = '.page_body'
      const res = await getRecordInfoForViewService(data, target)
      if (res?.retData) {
        this.tableInfo.list = res.retData.spuBasicInfoVoList
        this.footerFields = res.retData
      }
    }
  }
}
</script>
